<template>
    <div class="remand">
        <div class="hotD">
            <span><i class="iconfont icon-redian"></i>疫情热点</span>
            <span @click="flag=!flag" v-if="flag">查看更多<i class="iconfont icon-chakangengduo"></i></span>
            <span @click="flag=!flag" v-else><i class="iconfont icon-xitongfanhui">返回</i></span>
        </div>
        <!--疫情热点展示-->
        <template v-if="flag">
            <ul>
                <div class="liWt">
                    <div class="liWt-one">
                        <li v-for="item in news" :key="item.id">
                            <i class="iconfont icon-zuixinnewchunse"></i>
                            {{item.title}}
                        </li>
                    </div>
                </div>
            </ul>
        </template>
        <!--更多展示-->
       <template v-else>
               <div class="datilePage" v-for="item in news" :key="item.id">
                   <div class="datWt">
                       <p>{{item.pubDate | time}}</p>
                       <p>{{item.infoSource}}发布</p>
                       <p>{{item.summary}}</p>
                       <p>{{item.pubDateStr}}</p>
                   </div>
               </div>
       </template>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "epidemicReport",
        data(){
            return{
                news:[],
                flag:true
            }
        },
        mounted() {
            axios.get('http://api.tianapi.com/ncov/index?key=f2d47dfdee9eb196b39e3db3dd45b3d9').then(
                response => {
                    console.log('接口请求成功！',response.data.newslist[0].news)
                    this.news=response.data.newslist[0].news
                },
                error => {
                    console.log('接口请求出错！',error.message)
                }
            )
        },
        filters: {
            time:function (num) {
                var date=new Date(num)
                return date.toLocaleDateString()
            }
        }
    }
</script>

<style scoped>
    .remand{
        border: 1px solid #DCDFE6;
        width: 400px;
        margin: auto;
    }
    .hotD{
        border-bottom: 1px solid #E4E7ED;
        padding: 10px;
    }
    .hotD span:first-of-type{
        color: #F56C6C;
        font-size: 20px;
        font-weight: bold;
    }
    .hotD span:last-of-type{
        float: right;
        color:  #909399;
        margin-top: 5px;
    }
    .hotD span:last-of-type:hover{
        cursor: pointer;
    }
    .liWt{
        background: url("../../assets/img/logo.png");
        background-size: 100% 100%;

    }
    .liWt-one{
        background: white;
        opacity: 0.9;

    }
    ul li{
        //margin-top: 10px;
        color: #303133;
        list-style: none;
        margin: 10px 0 0 30px;
    }
    .datWt{
        background: white;
        opacity: 0.9;
    }
    .datWt p{
        margin-top: 10px;
    }
    .datilePage{
        border-bottom: 1px solid #b1b1b1;
        background: url("../../assets/img/logo.png") no-repeat;
        background-size: 400px 200px;
        padding: 10px;
    }
    .icon-zuixinnewchunse{
        color: #F56C6C;
        font-size: 20px;
    }
    .icon-redian{
        color: red;
        margin: 5px;
    }
    .icon-chakangengduo{
        margin-right: 5px;
        color: #909399;
    }
    .icon-xitongfanhui{
        font-size: 15px;
        margin-right: 5px;
    }
    .datilePage p:nth-of-type(1){
        color: #606266;
    }
    .datilePage p:nth-of-type(2){
        color: #409EFF;
    }
    .datilePage p:nth-of-type(3){
        color: #303133;
    }
    .datilePage p:nth-of-type(4){
        color: #909399;
    }
</style>